<template>
	<view>
		<view class="bgc">
			<u-navbar placeholder title="提现" :autoBack="true" bgColor="transparent"></u-navbar>
			<view style="padding: 0 30rpx;">
				<view class="price">
					<u--text :text="$t('my.wallet.titleText')" color="#231916" margin="20px 0 7px 0" size="13" />
					<view class="price_text">
						<u--text :text="userInfo.money" color="#672A02" size="25" bold></u--text>
						<u-button :text="$t('my.wallet.detailBtn')" :customStyle="btnStyle" @click="goList"></u-button>
					</view>
				</view>
			</view>
		</view>
		<view class="paybox">
			<view class="box-left">
				<image src="/static/image/wxPay.png"></image>
				<u--text text="微信" color="#141414" bold size="16"></u--text>
				<!-- <view>
					<u--text text="18810939967" color="#989898" size="15"></u--text>
				</view> -->
			</view>
			<u-icon name="arrow-right" color="#E8EAEC"></u-icon>
		</view>
		<view class="money">
			<u--text text="提现金额" color="#141414" bold size="16" margin="0 0 10px 0"></u--text>
			<view class="input">
				<view class="input-left">
					<view class="money-text">￥</view>
					<u--input :placeholder="'可提现金额 '+userInfo.money+' 元'" border="none" v-model="value"></u--input>
				</view>
				<view class="all" @click="value=userInfo.money">全部</view>
			</view>
		</view>
		<view class="btn">
			<u-button text="确认提现" shape="circle" @click="goMoney" :disabled="value==''" :customStyle="btn1Style">
			</u-button>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	export default {
		data() {
			return {
				btnStyle: {
					background: 'linear-gradient(180deg, #FF8824 0%, #DA4D00 100%)',
					borderRadius: '27px',
					height: "60rpx",
					width: "auto",
					padding: "0px 20px",
					border: "none",
					color: "#fff"
				},
				btn1Style: {
					background: "#FFC100",
					border: "none",
					height: "88rpx"
				},
				value: ""
			};
		},
		computed: {
			...mapGetters(['userInfo']),
		},
		methods: {
			...mapActions(['getUserInfo']),
			goList() {
				uni.$u.route('/pagesA/my/withdrawList');
			},
			goMoney() {
				uni.showLoading({
					title: "提现中...",
					mask: true
				})
				this.$http.post('wanlshop/pay/withdraw', {
					money: this.value,
					account_id: this.userInfo.id
				}).then(res => {
					uni.hideLoading()
					if (res.code == 1) {
						this.getUserInfo(uni.getStorageSync('token'))
						this.value = ""
						setTimeout(() => {
							this.$refs.uToast.show({
								type: 'default',
								message: "提交成功,待审核",
								duration:1000
							})
						}, 150)
					}
				})
			}
		}
	}
</script>
<style>
	page {
		background-color: #f5f7f9;
	}
</style>
<style lang="scss" scoped>
	.bgc {
		background-image: url();
		background-repeat: no-repeat;
		background-size: 100% 100%;
		padding-bottom: 150rpx;
		box-sizing: border-box;

		.price {
			margin-top: 20rpx;
			background-image: url();
			background-repeat: no-repeat;
			background-size: 100% 100%;
			height: 236rpx;
			padding: 40rpx 44rpx;
			box-sizing: border-box;
		}

		.price_text {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
	}

	.paybox {
		background-color: #fff;
		padding: 40rpx;
		border-radius: 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: -60px 16px 0;

		.box-left {
			display: flex;
			align-items: center;

			image {
				width: 108rpx;
				height: 108rpx;
				margin-right: 20rpx;
			}
		}
	}

	.money {
		background-color: #fff;
		padding: 45rpx 40rpx;
		border-radius: 30rpx;
		margin: 20rpx 16px;

		.input {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.money-text {
				color: #141414;
				font-weight: bold;
				font-size: 60rpx;
				margin-right: 20rpx;
			}

			.all {
				color: #FF9A00;
				font-size: 30rpx;
				font-weight: 400;
			}

			.input-left {
				display: flex;
				align-items: center;
			}
		}
	}

	.btn {
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
		bottom: 20%;
		width: 70%;
	}
</style>
